<template>
    <div class="function8" v-loading.fullscreen.lock="fullscreenLoading">

        <p class="function1_title1">基本信息</p>
        <div class="function1_content1">
            <div class="function1_content1_left">
                <el-avatar :size="60" :src="info.headPic" />
                <div class="function1_content1_left_info1">
                    <h4 class="function1_content1_left_info1_name1">{{ info.nickname }} </h4>
                    <div class="function1_content1_left_info1_name2">
                        <!-- <p>机构名称：{{ info.nickname }}</p> -->
                        <p>手机号码：{{ info.mobile }}</p>
                        <p>注册时间：{{ info.createTime }}</p>
                        <!-- <p>机构状态：{{ info.status }}</p> -->
                    </div>
                </div>
            </div>
            <div>
            </div>
        </div>

        <div class="function12">
            <el-dialog v-model="imgShow" width="760px">
                <img class="ww100" :src="showImg" alt="">
            </el-dialog>

            <div class="function1_content1">
                <div class="function1_content1_li2">
                    <p class="function1_content1_li2_title1">城市：{{ info.city }}</p>

                </div>
                <div class="function1_content1_li2" v-if="[3,null].includes(info.identity)">
                    <p class="function1_content1_li2_title1">球种：{{ info.ballSeed }}</p>

                </div>
                <div class="function1_content1_li2">
                    <p class="function1_content1_li2_title1">地址：{{ info.associationAddress }}</p>

                </div>
                <div class="function1_content1_li2">
                    <p class="function1_content1_li2_title1">联系人：{{ info.name }}</p>

                </div>
                <div class="function1_content1_li2">
                    <p class="function1_content1_li2_title1">电话：{{ info.contactMobile }}</p>

                </div>
                <div class="function1_content1_li2">
                    <p class="function1_content1_li2_title1">名称：{{ info.associationName }}</p>

                </div>

                <div class="function1_content1_li2">
                    <p class="function1_content1_li2_title1">log：</p>
                        <img class="function1_content1_li2_img" @click="imgShow = true; showImg =info.associationLogo" :src="info.associationLogo" alt="">

                </div>

                <div class="function1_content1_li2">
                    <p class="function1_content1_li2_title1">执照：</p>
                    <div v-for="item in dataArray">
                        <img class="function1_content1_li2_img" @click="imgShow = true; showImg = item" :src="item" alt="">
                    </div>
                </div>


            </div>

        </div>

    </div>
</template>
<script>

export default {
    data() {
        return {
            id: this.$route.params.id,
            param: {},
            info: {},
            imgShow: false,
            dataArray: []
        }
    },

    created() {
        this.getData()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        getData() {
            let that = this;
            that.fullscreenLoading = true;
            this.param.userId = this.id;
            that.$api.detailsv2DetailDto(this.param).then(res => {
                if (res) {
                    that.info = res;
                    this.dataArray = res.associationLicense.split(",");
                }
                that.fullscreenLoading = false;
            })

        },



    }

}


</script>
<style lang="scss" scoped>
.function8 {
    // bgf padd20
    background-color: #fff;
    padding: 20px;

    .function1_title1 {
        padding-left: 10px;
        display: inline-block;
        line-height: 20px;
        font-size: 14px;
        color: #242424;
        border-left: 4px solid #006DFF;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }

    .function1_content1 {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #EFEFEF;

        .function1_content1_left {
            display: flex;
            align-items: center;

            .function1_content1_left_info1 {
                padding-left: 16px;

                .function1_content1_left_info1_name1 {
                    font-size: 16px;
                    text-align: left;
                }

                .function1_content1_left_info1_name2 {
                    padding-top: 10px;
                    text-align: left;
                    color: #9a9a9a;

                    .function1_content1_left_info1_name2_content1 {
                        margin-top: 5px;
                    }
                }
            }
        }

        .function1_content1_button1 {
            width: 110px;
        }

        .function1_content1_button2 {
            width: 110px;
        }
    }
}

.function12 {
    padding: 20px;
    background-color: #fff;
    margin: 0;

    .function1_state1 {
        background: #F5F6FA;
        padding: 20px 24px;
        display: flex;

        .function1_state1_title1 {
            color: #1e1e1e;
            font-size: 24px;
            font-weight: 600;
        }

        .function1_state1_button1 {
            width: 115px;
            margin-left: 20px;
        }

    }

    .function1_title1 {
        background: #F7F8FA;
        padding: 0 18px;
        line-height: 48px;
        color: #1D1D1D;
        font-size: 14px;
        margin-top: 30px;
        text-align: left;
    }

    .function1_content1 {
        display: flex;
        flex-wrap: wrap;

        .function1_content1_li1 {
            display: flex;
            margin-right: 40px;
            margin-top: 20px;

            .function1_content1_li1_title1 {
                margin-left: 20px;
                font-size: 14px;
                color: #666;
                display: inline-block;
                line-height: 20px;
            }

            .function1_content1_li1_content1 {
                font-size: 14px;
                color: #666;
                display: inline-block;
                line-height: 20px;
            }

            .function1_content1_li1_button1 {
                font-size: 14px;
                color: #0771FF;
                display: inline-block;
                line-height: 20px;
                margin-left: 10px;
                cursor: pointer
            }
        }

        .function1_content1_li2 {
            width: 100%;
            display: flex;
            margin-right: 40px;
            margin-top: 20px;
            box-sizing: border-box;

            .function1_content1_li2_title1 {
                margin-left: 20px;
                font-size: 14px;
                color: #666;
                display: inline-block;
                line-height: 20px;
            }

            .function1_content1_li2_img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }
    }
}
</style>